<!DOCTYPE html> <!-- 声明文档类型为HTML5 -->
<html lang="en"> <!-- 设置文档语言为英语 -->
<head>
    <meta charset="UTF-8"> <!-- 设置字符编码为UTF-8 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 兼容IE浏览器 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口宽度为设备宽度，初始缩放比例为1 -->
    <title>结算页面</title> <!-- 设置网页标题 -->
    <link rel="icon" href="./favicon.ico"> <!-- 设置网页图标 -->
    <link rel="stylesheet" href="./css/reset.css"> <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="./font/css/all.css"> <!-- 引入字体样式表 -->
    <link rel="stylesheet" href="./css/base.css"> <!-- 引入基础样式表 -->
    <link rel="stylesheet" href="./css/index.css"> <!-- 引入首页样式表 -->
    <meta charset="UTF-8"> <!-- 重复设置字符编码为UTF-8 -->
    <link rel="stylesheet" href="结算页面.css"> <!-- 引入结算页面样式表 -->
</head>

<body>
    <!-- 顶部导航条 -->
    <div class="topbar-wrapper"> <!-- 顶部导航条容器 -->
        <div class="topbar w clearfix"> <!-- 顶部导航条容器，使用clearfix清除浮动 -->

            <!-- 左侧导航 -->
            <ul class="service"> <!-- 服务列表 -->
                <li><a href="javascript:;">小米商城</a></li> <!-- 小米商城链接 -->
                <li class="line">|</li> <!-- 文字间的分隔线 -->
                <li><a href="javascript:;">MIUI</a></li> <!-- MIUI链接 -->
                <li class="line">|</li> <!-- 文字间的分隔线 -->
                <li><a href="javascript:;">IoT</a></li> <!-- IoT链接 -->
                <li class="line">|</li> <!-- 文字间的分隔线 -->
                <li><a href="javascript:;">云服务</a></li> <!-- 云服务链接 -->
                <li class="line">|</li> <!-- 文字间的分隔线 -->
                <li><a href="javascript:;">天星数科</a></li> <!-- 天星数科链接 -->
                <li class="line">|</li> <!-- 文字间的分隔线 -->
                <li><a href="javascript:;">有品</a></li> <!-- 有品链接 -->
                <li class="line">|</li> <!-- 文字间的分隔线 -->
                <li><a href="javascript:;">小爱开放平台</a></li> <!-- 小爱开放平台链接 -->
                <li class="line">|</li> <!-- 文字间的分隔线 -->
                <li><a href="javascript:;">企业团购</a></li> <!-- 企业团购链接 -->
                <li class="line">|</li> <!-- 文字间的分隔线 -->
                <li><a href="javascript:;">资质证照</a></li> <!-- 资质证照链接 -->
                <li class="line">|</li> <!-- 文字间的分隔线 -->
                <li><a href="javascript:;">协议规则</a></li> <!-- 协议规则链接 -->
                <li class="line">|</li> <!-- 文字间的分隔线 -->
                <li class="app-wrapper"> <!-- 应用下载链接 -->
                    <a class="app" href="javascript:;"> <!-- 应用下载链接 -->
                        下载app <!-- 下载应用文本 -->
                        <!-- 添加一个弹出层 -->
                        <div class="qrcode"> <!-- 二维码容器 -->
                            <img src="./img/download.png"> <!-- 二维码图片 -->
                            <span>小米商城APP</span> <!-- 应用名称 -->
                        </div>
                    </a>
                </li>
                <li class="line">|</li> <!-- 文字间的分隔线 -->
                <li><a href="javascript:;">Select Location</a></li> <!-- 选择地区链接 -->
            </ul>

            <!-- 购物车 -->
            <ul class="shop-cart"> <!-- 购物车列表 -->
                <a href="javascript:;"> <!-- 购物车链接 -->
                    <i class="fas fa-shopping-cart"></i> <!-- 购物车图标 -->
                    购物车（0） <!-- 购物车中商品数量 -->
                </a>
                <div class="shop-cart-list"> <!-- 购物车列表 -->
                    <span>购物车中还没有商品，赶紧选购吧！</span> <!-- 提示信息 -->
                </div>
            </ul>

            <!-- 用户登陆注册 -->
            <ul class="user-info"> <!-- 用户信息列表 -->
                <li><a href="登录页面.html">登录</a></li> <!-- 登录链接 -->
                <li class="line">|</li> <!-- 文字间的分隔线 -->
                <li><a href="javascript:;">注册</a></li> <!-- 注册链接 -->
                <li class="line">|</li> <!-- 文字间的分隔线 -->
                <li><a href="javascript:;">消息通知</a></li> <!-- 消息通知链接 -->
            </ul>

        </div>
    </div>

<!-- 头部导航条 -->
<div class="header-wrapper"> <!-- 头部导航条的外层容器 -->
    <div class="header w"> <!-- 头部导航条的内层容器 -->
        <!-- logo -->
        <h1 class="logo"> <!-- Logo容器 -->
            <a href="#"><img src="./img/logo-mi2.png"></a> <!-- Logo图片链接 -->
        </h1>

        <!-- 创建一个中间导航条的容器 -->
        <div class="nav-wrapper"> <!-- 中间导航条的容器 -->
            <!-- 创建导航条 -->
            <ul class="nav clearfix"> <!-- 导航条列表，使用clearfix清除浮动 -->
                <li class="all-goods-wrapper"> <!-- 全部分类商品容器 -->
                    <a class="all-goods" href="#">全部商品分类</a> <!-- 全部分商品链接 -->

                    <li class="show-goods"><a href="#">Xiaomi手机</a></li> <!-- Xiaomi手机链接 -->
                    <li class="show-goods"><a href="#">电视</a></li> <!-- 电视链接 -->
                    <li class="show-goods"><a href="#">Redmi 红米</a></li> <!-- Redmi红米链接 -->
                    <li class="show-goods"><a href="#">笔记本</a></li> <!-- 笔记本链接 -->
                    <li class="show-goods"><a href="#">平板</a></li> <!-- 平板链接 -->
                    <li class="show-goods"><a href="#">家电</a></li> <!-- 家电链接 -->
                    <li><a href="#">路由器</a></li> <!-- 路由器链接 -->
                    <li><a href="#">服务</a></li> <!-- 服务链接 -->
                    <li><a href="#">社区</a></li> <!-- 社区链接 -->

                <!-- 创建一个搜索框的容器 -->
            <div class="search-wrapper"> <!-- 搜索框容器 -->
                <form class="search" action="#"> <!-- 搜索表单 -->
                    <input class="search-inp" type="text"> <!-- 搜索输入框 -->
                    <button class="search-btn"> <!-- 搜索按钮 -->
                        <i class="fas fa-search"></i> <!-- 搜索图标 -->
                    </button>
                </form>
            </div>

        </div>
    </div>

    <div class="product-container"> <!-- 商品容器 -->
        <div class="product-images"> <!-- 商品图片容器 -->
            <img src="img/r1.webp" alt="Xiaomi 15S Pro" class="main-image"> <!-- 商品主图 -->
        </div>
        <div class="product-info"> <!-- 商品信息容器 -->
            <h1>Xiaomi 15S Pro</h1> <!-- 商品名称 -->
            <p class="price">5499元</p> <!-- 商品价格 -->
            <p class="description"> <!-- 商品描述 -->
                「赠价值1366元四大尊享服务，领专属权益礼包」玄戒® O1 3nm 旗舰处理器 | 小米 15周年特别设计 | 徕卡光学 Summilux 全焦段三摄 | 6100 mAh 小米金芯电池 | 2K 低功耗超级阳光屏 | 小米首发全焦段 4K 夜景视频
            </p>
            <div class="location"> <!-- 收货地址容器 -->
                <label for="location">广东 佛山市 南海区 狮山镇</label> <!-- 地址标签 -->
                <input type="text" id="location" placeholder="修改"> <!-- 地址输入框 -->
            </div>
            <div class="version-selection"> <!-- 版本选择容器 -->
                <label>选择版本</label> <!-- 版本选择标签 -->
                <select> <!-- 版本选择下拉框 -->
                    <option>16GB+512GB</option> <!-- 16GB+512GB选项 -->
                    <option>16GB+1TB</option> <!-- 16GB+1TB选项 -->
                </select>
            </div>
            <div class="color-selection"> <!-- 颜色选择容器 -->
                <label>选择颜色</label> <!-- 颜色选择标签 -->
                <select> <!-- 颜色选择下拉框 -->
                    <option>龙鳞纤维版</option> <!-- 龙鳞纤维版选项 -->
                    <option>远空蓝</option> <!-- 远空蓝选项 -->
                </select>
            </div>
            <div class="service-selection"> <!-- 服务选择容器 -->
                <label>选择小米提供的尊享换新计划</label> <!-- 服务选择标签 -->
                <a href="#">了解尊享换新计划 ></a> <!-- 了解服务链接 -->
            </div>
            <div class="warranty-service"> <!-- 保值换新服务 -->
                <input type="checkbox" id="warranty"> <!-- 复选框 -->
                <label for="warranty">保值换新服务 69元</label> <!-- 服务标签 -->
            </div>
            <div class="action-buttons"> <!-- 操作按钮容器 -->
                <button class="add-to-cart">加入购物车</button> <!-- 加入购物车按钮 -->
                <a href="支付页面.html" class="add-to-cart-button"> <!-- 立即购买链接 -->
                    <button>立即购买</button> <!-- 立即购买按钮 -->
                </a>
            </div>
        </div>
    
</div>

<!-- 右侧固定工具条 -->
<div class="sidebar"> <!-- 侧边栏容器 -->
    <a href="javascript:;"> <!-- 手机APP链接 -->
        <i class="fas fa-mobile"></i> <!-- 手机图标 -->
        <span>手机APP</span> <!-- 文本 -->
    </a>
    <a href="javascript:;"> <!-- 个人中心链接 -->
        <i class="fas fa-user"></i> <!-- 用户图标 -->
        <span>个人中心</span> <!-- 文本 -->
    </a>
    <a href="javascript:;"> <!-- 售后服务链接 -->
        <i class="fas fa-wrench"></i> <!-- 工具图标 -->
        <span>售后服务</span> <!-- 文本 -->
    </a>
    <a href="javascript:;"> <!-- 人工客服链接 -->
        <i class="fas fa-headphones"></i> <!-- 耳机图标 -->
        <span>人工客服</span> <!-- 文本 -->
    </a>
    <a href="javascript:;"> <!-- 购物车链接 -->
        <i class="fas fa-shopping-cart"></i> <!-- 购物车图标 -->
        <span>&nbsp;&nbsp;购物车</span> <!-- 文本 -->
    </a>
    <a href="#"> <!-- 返回顶部链接 -->
        <i class="fa fa-chevron-up"></i> <!-- 向上箭头图标 -->
        <span>回到顶部</span> <!-- 文本 -->
    </a>
</div>

<!-- 页脚 -->
<div class="footer"> <!-- 页脚容器 -->
    <div class="wrap w"> <!-- 页脚包装器 -->
        <div class="footer-service"> <!-- 页脚服务信息 -->
            <ul> <!-- 服务列表 -->
                <li>
                    <a href="#"> <!-- 预约维修服务链接 -->
                        <i class="fas fa-gears"></i> <!-- 齿轮图标 -->
                        <span>预约维修服务</span> <!-- 文本 -->
                    </a>
                </li>
                <li>
                    <a href="#"> <!-- 七天无理由退货链接 -->
                        <i class="fa fa-thumbs-up"></i> <!-- 竖起大拇指图标 -->
                        <span>七天无理由退货</span> <!-- 文本 -->
                    </a>
                </li>
                <li>
                    <a href="#"> <!-- 15天免费换货链接 -->
                        <i class="fa fa-check"></i> <!-- 勾选图标 -->
                        <span>15天免费换货</span> <!-- 文本 -->
                    </a>
                </li>
                <li>
                    <a href="#"> <!-- 满69包邮链接 -->
                        <i class="fa fa-gift"></i> <!-- 礼物图标 -->
                        <span>满69包邮</span> <!-- 文本 -->
                    </a>
                </li>
                <li>
                    <a href="#"> <!-- 1100余家售后网点链接 -->
                        <i class="fas fa-map-location"></i> <!-- 地图位置图标 -->
                        <span>1100余家售后网点</span> <!-- 文本 -->
                    </a>
                </li>
            </ul>
        </div>
        <div class="footer-link"> <!-- 页脚链接信息 -->
            <ul> <!-- 选购指南列表 -->
                <li>选购指南</li> <!-- 选购指南标题 -->
                <li><a href="#">手机</a></li> <!-- 手机链接 -->
                <li><a href="#">电视</a></li> <!-- 电视链接 -->
                <li><a href="#">笔记本</a></li> <!-- 笔记本链接 -->
                <li><a href="#">平板</a></li> <!-- 平板链接 -->
                <li><a href="#">穿戴</a></li> <!-- 穿戴链接 -->
                <li><a href="#">耳机</a></li> <!-- 耳机链接 -->
                <li><a href="#">家电</a></li> <!-- 家电链接 -->
                <li><a href="#">路由器</a></li> <!-- 路由器链接 -->
                <li><a href="#">音箱</a></li> <!-- 音箱链接 -->
                <li><a href="#">配件</a></li> <!-- 配件链接 -->
            </ul>
            <ul> <!-- 服务中心列表 -->
                <li>服务中心</li> <!-- 服务中心标题 -->
                <li><a href="#">申请售后</a></li> <!-- 申请售后链接 -->
                <li><a href="#">售后政策</a></li> <!-- 售后政策链接 -->
                <li><a href="#">维修服务价格</a></li> <!-- 维修服务价格链接 -->
                <li><a href="#">订单查询</a></li> <!-- 订单查询链接 -->
                <li><a href="#">以旧换新</a></li> <!-- 以旧换新链接 -->
                <li><a href="#">保障服务</a></li> <!-- 保障服务链接 -->
                <li><a href="#">防伪查询</a></li> <!-- 防伪查询链接 -->
                <li><a href="#">F码通道</a></li> <!-- F码通道链接 -->
            </ul>
            <ul> <!-- 线下门店列表 -->
                <li>线下门店</li> <!-- 线下门店标题 -->
                <li><a href="#">小米之家</a></li> <!-- 小米之家链接 -->
                <li><a href="#">服务网点</a></li> <!-- 服务网点链接 -->
                <li><a href="#">授权体验店/专区</a></li> <!-- 授权体验店/专区链接 -->
            </ul>
            <ul> <!-- 关于小米列表 -->
                <li>关于小米</li> <!-- 关于小米标题 -->
                <li><a href="#">了解小米</a></li> <!-- 了解小米链接 -->
                <li><a href="#">加入小米</a></li> <!-- 加入小米链接 -->
                <li><a href="#">投资者关系</a></li> <!-- 投资者关系链接 -->
                <li><a href="#">社会责任负责</a></li> <!-- 社会责任负责链接 -->
                <li><a href="#">廉洁举报</a></li> <!-- 廉洁举报链接 -->
            </ul>
            <ul> <!-- 关注我们列表 -->
                <li>关注我们</li> <!-- 关注我们标题 -->
                <li><a href="#">新浪微博</a></li> <!-- 新浪微博链接 -->
                <li><a href="#">官方微信</a></li> <!-- 官方微信链接 -->
                <li><a href="#">联系我们</a></li> <!-- 联系我们链接 -->
                <li><a href="#">公益基金会</a></li> <!-- 公益基金会链接 -->
            </ul>
            <div class="footer-aside"> <!-- 页脚侧边栏 -->
                <p class="tel">400-100-5678</p> <!-- 联系电话 -->
                <p class="time">8:00-18:00（仅收市话费）</p> <!-- 工作时间 -->
                <a href="#" class="kefu">人工客服</a> <!-- 人工客服链接 -->
                <div class="follow">关注小米：</div> <!-- 关注小米标题 -->
                    <i class="fab fa-weibo"></i> <!-- 新浪微博图标 -->
                    <i class="fab fa-weixin"></i> <!-- 微信图标 -->
                </div>
                <div class="follow"> <!-- 下载小米APP标题 -->
                    <a href="#"><img src="./img/logo-mi2.png"></a> <!-- 小米Logo -->
                    下载小米APP <!-- 文本 -->
                </div>
            </div>
        </div>
    </div>
</div>

<div class="slogan w">探索黑科技，小米为发烧而生</div> <!-- 页脚标语 -->
</body>
</html>